<template>
    <div class="login">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">华阳智能SOP指导系统</h3>
        <el-form-item prop="project" label="项目名称 ：">
            <el-select
                v-model="loginForm.project"
                filterable
                remote
                placeholder="请输入项目名称/项目编号"
                :remote-method="remoteMethod"
                @change="changeFun"
                :loading="loading_options">
                <el-option
                v-for="item in project_list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="device" label="设备名称 ：">
          <el-select
                v-model="loginForm.device"
                filterable
                placeholder="请输入设备名称"
               >
                <el-option
                v-for="item in device_list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">确  认</span>
            <span v-else>确 认 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <!--  底部  -->
      <div class="el-login-footer">      
        <span >内部备案 2022002135号-1</span>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios"

  export default {
    name: "Login",
    data() {
      return {
        project_list: [],
        device_list: [],
        loading_options: false,
        loginForm: {
          project: '',
          device: '',
        },
        loginRules: {
          project: [
            { required: true, trigger: "blur", message: "请输入项目名称" }
          ],
          device: [
            { required: true, trigger: "blur", message: "请输入设备名称" }
          ]
        },
        loading: false,
      };
    },
    created() {
   
    },
    methods: {
        changeFun() {
            this.apiFun(this.loginForm.project,1)
            this.loginForm.device = ''
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading_options = true;
                this.apiFun(query);
            } else {
                this.options = [];
            }
        },
        apiFun(name,type){
            axios.post(`http://localhost:9984/dev-api/sop/manage/list`,{
                deptName: name,
            }).then(res=>{
                this.loading_options = false;
                const resData = res.data;
                if(resData.data.length == 0){
                    this.project_list =[]
                    this.device_list = []
                    return
                }
                // 拼接项目数据
                this.project_list = resData.data.map(item => {
                    return { value: item.deptName, label: item.deptName + '--' + item.deptNum };
                });
                // 拼接设备数据
                this.device_list = resData.child.map(item => {
                    return { value: item.dept_id, label: item.dept_name };
                })
                if(type == 1){
                    this.$notify({
                        title: '获取设备成功',
                        message: '当前设备数量为 '+this.device_list.length,
                        type: 'success'
                    });   
                }
            })
        },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    // 获取设备名称
                    let device_name = ''
                    this.device_list.forEach(item=>{
                      if(item.value == this.loginForm.device){
                        device_name = item.label
                      }
                    })
                    // 携带设备id参数跳转
                    this.$router.push({path: '/home', query: { device: this.loginForm.device, project: this.loginForm.project, device_name: device_name}});
                }else{
                    this.$message.error('请填写对应信息');
                }
            });
        }
    }
  };
  </script>
  
  <style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url("../assets/login-background.jpg");
    background-size: cover;
    .el-form-item__error{
        right: 0px;
    }
  }
  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }
  
  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .login-code-img {
    height: 38px;
  }
  </style>
  